
import { isObject } from '@vue/shared'
import { ExtractPropTypes } from 'vue'
import { TuniaoSize, TuniaoSizes, TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * FormType有效值
 */
const ButtonFormTypes = ['submit', 'reset'] as const
export type ButtonFormType = typeof ButtonFormTypes[number]
/**
 * OpenType有效值
 */
const ButtonOpenTypes = ['feedback', 'share', 'contact', 'getPhoneNumber', 'launchApp', 'openSetting', 'getAuthorize', 'contactShare', 'lifestyle', 'openGroupProfile', 'chooseAvatar'] as const
export type ButtonOpenType = typeof ButtonOpenTypes[number]
/**
 * 形状有效值
 */
const ButtonShapes = ['round', 'circle'] as const
export type ButtonShape = typeof ButtonShapes[number]
/**
 * props参数
 */
export const buttonProps = {
  /** 宽度, 默认单位rpx */
  width: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 高度, 默认单位rpx */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 尺寸 sm lg xl, 单独设置宽高会覆盖尺寸设置的值 */
  size: {
    type: String,
    default: '',
    validator: (value: TuniaoSize | '') => {
      return value === '' || TuniaoSizes.includes(value)
    }
  },
  /** 按钮形状 round 圆角 circle 圆形(只有width参数有效) */
  shape: {
    type: String,
    default: '',
    validator: (value: ButtonShape | '') => {
      return value === '' || ButtonShapes.includes(value)
    }
  },
  /** 镂空按钮, 如果没有设置边框则变成透明按钮 */
  plain: {
    type: Boolean,
    default: false
  },
  /** 显示边框, 当plain为true时生效 */
  border: {
    type: Boolean,
    default: false
  },
  /** 加粗边框, 当plain和border同时为true时才生效 */
  borderBold: {
    type: Boolean,
    default: false
  },
  /** border边框颜色, 当plain和border同时为true时才生效 */
  borderColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('border', value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 设置阴影 */
  shadow: {
    type: Boolean,
    default: false
  },
  /** 阴影颜色 */
  shadowColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('shadow', value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 加粗字体 */
  fontBold: {
    type: Boolean,
    default: false
  },
  /** 点击时的效果class */
  hoverClass: {
    type: String,
    default: 'tn-hover'
  },
  /** 自定义样式, 会覆盖配置的宽高和字体信息 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 禁用按钮 */
  disabled: {
    type: Boolean,
    default: false
  },
  /** 显示加载图标 */
  loading: {
    type: Boolean,
    default: false
  },
  /** 触发form表单的事件类型, reset/submit */
  formType: {
    type: String,
    default: '',
    validator: (value: ButtonFormType | '') => {
      return value === '' || ButtonFormTypes.includes(value)
    }
  },
  /** 
   * 开放能力
   * 具体能力参考官网https://uniapp.dcloud.io/component/button.html
   */
  openType: {
    type: String,
    default: '',
    validator: (value: ButtonOpenType | '') => {
      return value === '' || ButtonOpenTypes.includes(value)
    }
  },
  /** 打开app时向app传递的参数, 在微信、QQ小程序和openType为launchApp时生效 */
  appParameter: {
    type: String,
    default: ''
  },
  /** 会话来源, 在微信小程序和openType为contact时生效 */
  sessionFrom: {
    type: String,
    default: ''
  },
  /** 会话内消息卡片标题, 默认为当前标题, 在微信小程序和openType为contact时生效 */
  sendMessageTitle: {
    type: String,
    default: ''
  },
  /** 会话内消息卡片点击跳转小程序路径, 默认为当前路径, 在微信小程序和openType为contact时生效 */
  sendMessagePath: {
    type: String,
    default: ''
  },
  /** 会话内消息卡片图片, 默认为截图, 在微信小程序和openType为contact时生效 */
  sendMessageImg: {
    type: String,
    default: ''
  },
  /** 是否显示会话内消息卡片, 设置此参数为true, 用户进入客服会话会在右下角显示"可能要发送的小程序"提示, 用户点击后可以快速发送小程序消息, 在微信小程序和openType为contact时生效 */
  showMessageCard: {
    type: Boolean,
    default: false
  },
  /** 开启防止快速点击，间隔200ms */
  blockRepeatClick: {
    type: Boolean,
    default: false
  },
  /** 点击按钮时传递的标志符 */
  index: {
    type: [String, Number],
    default: ''
  }
}
export type ButtonProps = ExtractPropTypes<typeof buttonProps>

// 事件回调参数类型
/**
 * 获取手机号码
 */
export interface GetPhoneNumber {
  detail: {
    /** 动态令牌, 可通过动态令牌换取用户手机号 */
    code: string
  }
}

export const buttonEmits = {
  /** 点击回调 */
  click: (index: string | number) => typeof index === 'string' || typeof index === 'number',
  /** 获取用户手机号码 */
  getphonenumber: (e: GetPhoneNumber) => isObject(e),
  /** 开放能力调用发生错误时回调 */
  error: (e: any) => true,
  /** 打开权限设置面板并关闭时回调 */
  opensetting: (e: any) => true,
  /** 打开app时回调 */
  launchapp: (e: any) => true,
  /** 选择头像时回调 */
  chooseavatar: (e: any) => true
}
export type ButtonEmits = typeof buttonEmits
